// 引入ajax
import ajax from '../api/ajax.js'
// 抛出class
import base from "./base.js"
import login from './login.js';
export default class extends base {

    // 渲染页面
    render() {
        //     this.el.html(`
        // <div>
        // <h1>注册</h1>
        // <div>

        // <input type="text" name="username" value="zhangsan">
        // 
        // </div>
        // <div>
        // <input type="text" name="password" value="123">
        // </div>
        // <button class="regBut">注册</button>
        // <div class="hint"></div>
        // </div>`);

        this.el.html(
            `  
    <section>
        <div class="login-ui ">
       <h1 style="line-height: 80px;color: #fff;">
        注册
       </h1>
       <input type="text" name="username" style="margin-bottom: 30px" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input ">
       <span style="color:red"></span>
       <input type="text"  name="password"  style="margin-bottom: 80px" lay-verify="title" autocomplete="off" placeholder="请输入密码" class="layui-input ">
       <button type="button" style="padding: 0 30px;" class="layui-btn regBut layui-btn-radius">注册</button>
       <div class="hint" style="color:red"></div>
        </div>
    </section>
    `);

        this.username = $('input[name="username"]');
        this.password = $('input[name="password"]');
        this.regBut = $(".regBut");
        this.inpEle = $("input");
        this.loginUi = $(`.login-ui`);

        $("section").css({
            backgroundImage: "url(./IMG/bg.jfif)",
            backgroundRepeat: "no-repeat",
            backgroundSize: "100%",
            height: 100 + 'vh',
            width:"100%",
            display: "flex",
            alignItems: "center",

        })

        $(".layui-btn").css(

            {
                backgroundColor: ' #393d49d3',
            }
        )
        this.inpEle.css({
            border: "0",
            backgroundColor: ' #393d49af',
            color: "#fff"
        })
        this.loginUi.css({
            width: "380Px",
            height: '400px',
            margin: 'auto',
            textAlign: 'center',
            backgroundColor: ' #393d49af',
            borderRadius: "5px",
        })
    }
    // 加载事件
    handle() {
        this.username.on("blur", async e => {
            // 获取页面输入
            const username = this.username.val();
            // 将用户输入发送给服务器
            const data = await ajax.verifyUsername({
                username
            })
            if (typeof data == "object") {
                $("span").html("该账号已注册")
                this.username.on("focus", e => {
                    this.username.val('')
                    $("span").html("")
                })
            }
        })

        this.regBut.on("click", async e => {
            // 获取用户输入的内容
            const username = this.username.val();
            const password = this.password.val();
            // 将数据发生给服务器并接受返回的数据。
            let data = await ajax.reg({
                username,
                password
            });
            console.log(username, password);
            if (data._id) {
                $(".hint").html("注册成功");
                let i = 5;
                const stert = setInterval(() => {
                    $(".hint").html(`${i}秒后回到登录页面`);
                    i--;
                    if (i == 0) {
                        
                        $(".hint").html(``);
                        clearInterval(stert);
                        location.hash = "#/login";
                    }
                }, 1000)
              
            }

        })
    }
}